<template>
	<view class="friendBox">
		<view class="friendhead">
			<image :src="item.pictitle" mode=""></image>
		</view>
		<view>
			<view>
				<view>{{item.head}}</view>
				<view class="icon iconfont" :class="[item.sex==0?'icon-nan sexnan':'icon-nv sexnv']">{{item.age}}
				</view>
			</view>
			<view>
				<view class="icon iconfont icon-xuanze-yixuan" 
				v-if="item.isfollow==0"></view>
				<view class="icon iconfont icon-zengjia1" 
				v-if="item.isfollow==1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['item']
	}
</script>

<style scoped lang="scss">
.friendBox{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10upx;
	padding: 20upx;
	border-bottom: 1px solid #F0F0F0;
	.friendhead{
		width: 120upx;
		height: 120upx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 100%;
		}
	}
	&>view:nth-of-type(2){
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		margin-left: 20upx;
		&>view:first-child{
			display: flex;
			flex-direction: column;
			&>view:first-child{
				font-size: 35upx;
			}
			&>view:nth-of-type(2){
				font-size: 20upx;
				text-align: center;
				width: 80upx;
				border-radius: 40upx;
				color: #ffffff;
			}
			.sexnan{
				background-color: #43B3FF;
			}
			.sexnv{
				background-color: #FF698D;
			}
		}
		&>view:nth-of-type(2){
			.icon-xuanze-yixuan{
				
				color: #CCCCCC;
			}
			.icon-zengjia1{
				color: #FBAC73;
			}
		}
	}
}
</style>
